<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 800px;
            background-color: pink;
        }

        ul {
            width: 300px;
            height: 800px;
            background-color: burlywood;
            list-style: none;
        }

        li {
            width: 200px;
            height: 100px;
            background-color: blueviolet;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>li-1</li>
            <li>li-2</li>
            <li>li-3</li>
            <li>li-4</li>
        </ul>
    </div>

    <script>
        // 冒泡: 在拥有父元素的元素身上发生,该元素跟父元素绑定了同一个事件
        // addEventListener(事件类型,事件处理程序,冒泡或者捕获)
        // true   捕获   从外往里
        // false  冒泡   从里往外   默认
        // 获取元素
        var box = document.querySelector(".box");
        var ul = document.querySelector("ul");
        var lis = document.querySelectorAll("li");

        // box点击事件
        box.addEventListener("click", function () {
            console.log(this);
            // 事件对象  event  

        }, false)
        // ul点击事件
        ul.addEventListener("click", function () {
            console.log(this);    //绑定事件的元素
            // 阻止冒泡  (阻止向外冒泡)
            event.stopPropagation();
        }, false)

        // li点击事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].addEventListener("click", function () {
                console.log(this);
                // 阻止冒泡  (阻止向外冒泡)
                event.stopPropagation();
            }, false)
        }

        // 使用属性绑定
        ul.onmousedown = function(){
            console.log(this);
            // 阻止冒泡
            event.stopPropagation()
        }

        box.onmousedown = function(){
            console.log(this);
        }
    </script>
</body>

</html>